<template>
  <div class="hello">
     <header class="site-header site-header-s">
        <nav id="top-header">
            <div class="top-nav">
                <div id="user-profile">
                      <div class="user">
                        <div class="user-login" @click="register">
                              <a href="javascript:;"><i class="be be-personoutline"><img src="../assets/images/register.png"></i>注册</a>
                          </div>
                          <div class="nav-set" @click="login">
                            <div class="nav-login"> 
                              <a href="javascript:;" class="flatbtn" id="login-main"><i class="be be-timerauto"><img src="../assets/images/login.png"></i>登录</a>
                            </div>
                          </div> 
                      </div>
                      <div class="time">
                          {{time}}
                          {{week}}
                      </div>
               </div>

               <div class="menu-item">
                  <span class="website">网站公告</span>
                  <span class="leave">给我留言</span>
               </div>
            </div>
        </nav>
        <div class="menu-box">
           <div class="menu-top">
                 <div class="menu-share">
                    <span>Mr Huang</span>
                    <p>分享生活，分享技术</p>
                 </div>

                 <div class="site-nav-wrap">
                      <ul>
                          <router-link to="/">
                             <li class="active">首页</li>
                          </router-link>
                           
                          <router-link to="/blogType">
                             <li>文章分类</li>
                          </router-link>
                          
                          <router-link to="/share">
                             <li>分享</li> 
                          </router-link>             
                         
                          <li>休闲娱乐</li> 
                          <li>关于</li>    

                      </ul>
                 </div>
           </div>
           
        </div>
    </header>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      time:"",
      week:""
    }
  },
  created(){
      setInterval(()=> {
        this.time = this.util.getTime()
        this.week = this.util.getWeek()
      },1000)
  },
  methods:{
      login() {
         this.$http({
            method: "get", 
            url: this.url +'/getSvgCaptcha'
        })
        .then(res => {
			       this.$store.commit("login", {
                loginMask: true,
                getSvgCaptcha: res.data.result
             });   
			  })   
      },
      register() {
        this.$store.commit("register", {
          registerMask: true
        });  
      } 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:222;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
}
.top-nav{
  width:1120px;
   margin:0 auto;
   height:30px;
   line-height:30px;
   display:flex
}
#top-header {
    background: #e7e7e7;
    border-bottom: 1px solid #dedede;
}
.be img{
  width:14px;
  vertical-align:middle;
  margin-right:4px;
}
#user-profile{
  width:40%;
  display:flex
}
.user-login{
  margin-right:12px;
}
#user-profile a{
  color: #555;
  text-decoration: none;
}
#user-profile a:hover {
    color: #3690cf;
}
.time{
  margin-left:20px
}
.menu-item{
  width:60%;
  text-align:right
}
.website{
  margin-right:20px
}
.leave{
   background: #16a085;
   color: #fff ;
   padding:3px 6px;
   border-radius:4px
}
.website:hover {
    color: #3690cf;
    cursor:pointer
}
.leave:hover{
  cursor:pointer
}
.menu-top{
  background:white;
  height:88px
}
.menu-top{
  width:1120px;
  margin:0 auto
}
.menu-share{
  width:40%;
  text-align:left
}
.menu-share span{
   font-size:26px;
   margin:20px 0 8px 0;
   display:inline-block;
   font-weight: 700;
}
.menu-share span:hover {
    color: #3690cf;
    cursor:pointer
}
.menu-top{
  display:flex
}
.site-nav-wrap ul{
   display:flex;
   float:right
}
.site-nav-wrap ul li{
   list-style-type:none;
   height:88px;
   line-height:88px;
   padding:0 30px;
   cursor:pointer
}
.site-nav-wrap ul li.active{
  background: #3690cf;
  color:white;
}
.site-nav-wrap{
  width:60%;
  text-align:right
}
.menu-box{
  background:white
}
.user{
  display:inline-block;
  display:flex
}
</style>

